<template>
    <ph-action-bar class="ph-table-actionbar">
        <div>
            <ph-button v-if="action.delChecked" type="danger" @click="$emit('del-checked')">删除选中</ph-button>
        </div>
        <div class="ph-action-right">
            <dropdown v-if="action.colFilter" icon="filter" title="列筛选" @action="onColFilter" :checkActions="cols" align="left" :multiple="true">
                <dropdown-item v-for="th in ths" :action="th.key" :key="th.key">{{th.name}}</dropdown-item>
            </dropdown>
            <dropdown v-if="action.export" icon="reply" title="导出" @action="onExport" align="left">
                <dropdown-item action="xls">导出excel</dropdown-item>
                <dropdown-item action="csv">导出csv</dropdown-item>
            </dropdown>
            <ph-button v-if="action.print" icon="print"  @click="$emit('print')">打印</ph-button>
        </div>
    </ph-action-bar>
</template>
<script lang="ts">
import { computed, defineAsyncComponent, defineComponent, PropType } from 'vue'
import {PhActionBar,PhButton} from '../base'
import {ITh,TableAction} from './struct'
export default defineComponent({
    props:{
        ths:{
            type: Array as PropType<Array<ITh>>,
            default:()=>[]
        },
        action:{
            type:Object as PropType<TableAction>,
            default:()=>({})
        }
    },
    components:{
        PhActionBar,
        PhButton,
        Dropdown:defineAsyncComponent(()=>import('../dropdown/dropdown.vue')),
        DropdownItem:defineAsyncComponent(()=>import('../dropdown/dropdown-item.vue')),
    },
    setup(props,{emit}){
        const onExport = (v:string)=>emit('export',v)
        const onColFilter = (v:Array<string>)=>emit('col-filter',v)
        const cols = computed(()=>props.ths.map(th=>th.key))
        return {onExport,onColFilter,cols}
    }
})
</script>
<style lang="scss" scoped>
.ph-table-actionbar{
    box-shadow: 0 1px var(--ph-5) rgb(0 0 0 / 8%);
    border-bottom: none;
    z-index: 2;
    .ph-action-right{
        & > :not(:first-child){
            margin-left: -1px;
        }
    }
}
</style>
